<template>
    <div class="star">
        <span class="star-item" :class="itemClass" v-for="(itemClass,key) in itemClasses" :key="key" @click="handlerClick(key)"></span>
    </div>
</template>
<script>
    const CLS_ON="on";
    const CLS_OFF="off";
    export default {
		data() {
			return {
			}
		},
        props:{
            score:{
                type:Number
            },
			index: Number, // 第二种需要
			item: Object
        },
        computed:{
            itemClasses(){
                //计算属性
				// console.log(result)
				const {score} = this
				const result = [] //定义一个数组，来存放控制五个星星颜色的类
				//总个数5个
				//全星星on n个CLS_OFF
				const scoreInteger = Math.floor(score);
				for(let i=0; i<scoreInteger; i++){
					result.push(CLS_ON)
				}
				//无星星 CLS_OFF
				while(result.length<5){
					result.push(CLS_OFF)
				}
				return result
            }
        },
		methods:{
			handlerClick(key) {
				this.$emit('XClick', {index: this.index, item: this.item,akey:key});
			},
		}
    };
</script>
<style scoped lang="scss">
     .star{
		font-size:0;
		.star-item{
			display:inline-block;
			background-repeat: no-repeat;
			width:45rpx;
			height:45rpx;
			margin-right:22rpx;
			
		}
		.on{
			background: url(../static/icons/pj_on.png) no-repeat center;
			background-size:100% 100%;
		}
		.off{
			background: url(../static/icons/pj_off.png) no-repeat center;
			background-size:100% 100%;
		} 
	 }
	
	
   
</style>
